<template>
	<yd-flexbox class="login" direction="vertical">
		<div class="banner-bg">
			<img class="banner-img" src="../assets/img/images/loginbg_02.jpg" />
		</div>
		<div class="login-content">
			<div class="login-main">
				<div class="logincebter">
					<img class="logo" src="../assets/img/images/login-logo_03.png" />
				</div>
				<!--账号登录-->
				<div class="login-tab">
					<yd-tab active-color="#282828">
						<yd-tab-panel class="Account" label="验证码登录">
							<ul class="mytab-ul">
								<li class="mytab-ul-item">
									<yd-cell-item>
										<span slot="left" class="mycell-item-left icont"></span>
										<!--<yd-input :on-blur="blurgetimg" regex="mobile" ref="phone2" class="my-cellinput" slot="right" v-model="phone2" placeholder="输入手机号"></yd-input>-->
										<yd-input slot="right" v-model="phone2" ref="phone2" regex="mobile" placeholder="输入手机号"></yd-input>

									</yd-cell-item>
								</li>
								<li class="mytab-ul-item mytab-ul-item-y">
									<span class="mycell-item-left icony"></span>
									<input class="my-input" v-model="vercode" placeholder="验证码" />
									<a v-show="!codesta" @click="Verification()">{{codetiem}}</a>
									<a v-show="codesta">{{codetiem}}</a>
								</li>
								<li class="mytab-ul-item-other">
									<span>登录即同意<a @click="setOpenApp('http://www.zhudd.com/service/law')">《网站协议》</a></span>
								</li>
								<li class="mytab-ul-item-btn">
									<button class="account-submint-btn" @click="Signin">登录</button>
								</li>
							</ul>
						</yd-tab-panel>
						<yd-tab-panel class="Account" id="my-tab-active" label="密码登录">
							<ul class="mytab-ul">
								<li class="mytab-ul-item">
									<yd-cell-item>
										<span slot="left" class="mycell-item-left icont"></span>
										<yd-input class="my-cellinput" slot="right" regex="mobile" v-model="phone1" placeholder="输入手机号"></yd-input>
									</yd-cell-item>
								</li>
								<li class="mytab-ul-item">
									<yd-cell-item>
										<span slot="left" class="mycell-item-left iconp"></span>
										<yd-input class="my-cellinput" slot="right" type="password" v-model="Password" placeholder="请输入密码"></yd-input>
									</yd-cell-item>
								</li>
								<li class="mytab-ul-item-other">
									<span>登录即同意<a  @click="setOpenApp('http://www.zhudd.com/service/law')">《网站协议》</a></span>
								</li>

								<li class="mytab-ul-item-btn">
									<button class="account-submint-btn" @click="Account()">登录</button>
								</li>
							</ul>
						</yd-tab-panel>

					</yd-tab>
				</div>
			</div>
			<!--第三方登录-->
			<!--<div class="tp-login">
				<div class="tp-login-top">
					<span class="tp-login-title">第三方登录</span>
				</div>
				<div class="tp-login-main">
					<div class="tp-logo" @click="GOQQ()"><img src="../assets/img/images/qq.png" /></div>
					<div class="tp-logo"><img src="../assets/img/images/weixin.png" /></div>
					<div class="tp-logo"><img src="../assets/img/images/weibo.png" /></div>
				</div>
			</div>-->

		</div>
	</yd-flexbox>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import Swiper from "../assets/libs/jquery.md5.js";
	export default {
		name: 'login',
		data() {
			return {
				//				账号登录
				phone1: '',
				Password: '',
				//				手机登录
				phone2: '',
				random: '',
				vercode: '',
				Grapcode: '',
				Graphical: true,
				imgUrl: '',
				codetiem: "获取验证码",
				codesta: false
			}
		},
		mounted() {

			document.body.style.overflow = "visible";
			document.querySelector("html").style.overflow = "visible";
		},
		computed: {
			...mapGetters([
				'source',
				'userinfo'
			])
		},
		methods: {
			...mapActions({
				setOpenApp: 'setOpenApp',
				setUserInfo: 'setUserInfo',
				setUsersta: 'setUsersta'
			}),
			GOQQ() {
				QC.Login.showPopup({
					appId: "101476304",
					redirectURI: "http%3a%2f%2fm.zhudd.cn%2foauth"
				});
			},
			//			getAesString(data, key, iv) { //加密
			//				var key = CryptoJS.enc.Utf8.parse(key);
			//				var iv = CryptoJS.enc.Utf8.parse(iv);
			//				var encrypted = CryptoJS.AES.encrypt(data, key, {
			//					iv: iv,
			//					mode: CryptoJS.mode.CBC,
			//					padding: CryptoJS.pad.Pkcs7
			//				});
			//				return encrypted.toString(); //返回的是base64格式的密文
			//			},
			//			getAES(data) { //加密
			//				let that=this;
			//				let JsonAes = JSON.stringify(data);
			//				var key = '41903b5b3cc588d0'; //密钥
			//				var iv = '0102030405060708';
			//				var encrypted = that.getAesString(JsonAes, key, iv); //密文
			//				var encrypted1 = CryptoJS.enc.Utf8.parse(encrypted);
			//				return encrypted;
			//			},
			//			账号登录
			Account() {
				var that = this;
				let ajaxSign = {
					"login_type": '8',
					"source": that.source, // string 是
					"phone": that.phone1,
					"passWord": $.md5(that.Password),
				};
				let ajaxData = api.getAES(ajaxSign);
				//				数据调用
				api.GetLogin(ajaxData)
					.then(res => {
						let ajaxdata = res.result;
						if(res.sta == -1) {
							that.$dialog.toast({
								mes: res.msg,
								timeout: 1000
							});
						}
						if(res.sta == 200) {
							sessionStorage.setItem("userinfo", JSON.stringify(ajaxdata))
							that.setUserInfo(ajaxdata);
							that.setUsersta(true);
							that.$router.go(-1);
						}
					})
			},
			//			获取手机验证码
			Verification() {
				var that = this;
				let ajaxSign = {
					"source": that.source,
					"phone": that.phone2
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetVerCode(ajaxData)
					.then(res => {
						if(res.sta == 200) {
							that.num();
						}
						that.$dialog.toast({
							mes: res.msg,
							timeout: 1000
						})
					})
			},
			num() {
				let that = this;
				let n = 60
				that.codesta = true;
				let setter = setInterval(function() {
					n--;
					that.codetiem = n + "s";
					if(n == 0) {
						that.codetiem = "获取验证码"
						that.codesta = false;
					}

				}, 1000)
				setTimeout(function() {
					clearInterval(setter)
				}, 60000)
			},
			//			手机验证码登录
			Signin() {
				var that = this;
				var ajaxSign = {
					"login_type": 1,
					"source": that.source, // string 是
					"phone": that.phone2,
					"code": that.vercode
				};
				let ajaxData = api.getAES(ajaxSign);

				//				数据调用
				api.GetLogin(ajaxData)
					.then(res => {
						let ajaxdata = res.result;
						that.$dialog.toast({
							mes: res.msg,
							timeout: 1000
						})
						if(res.sta == 200) {
							that.setUserInfo(ajaxdata);
							that.setUsersta(true);
							that.$router.go(-1)
						}
					})
			},
		}
	}
</script>

<style>
	body {
		background: #fff;
	}
	
	.login {
		background: #fff;
	}
	
	.login .banner-bg {
		width: 100%;
		height: 3.79rem;
	}
	
	.login .banner-img {
		display: block;
		max-width: 100%;
		min-height: 100%;
	}
	
	.login .login-content {
		width: 100%;
		background: #fff;
		padding: 0 .34rem;
		box-sizing: border-box;
	}
	
	.login .login-main {
		width: 100%;
		margin-top: -.84rem;
		border-radius: 5px;
		box-shadow: 0px 1px 2px gainsboro;
	}
	
	.login .logincebter {
		width: 100%;
		background: #fff;
		border-radius: 5px;
	}
	
	.login .logo {
		display: block;
		width: 1.47rem;
		height: 1.47rem;
		margin: auto;
		transform: translateY(-.74rem);
	}
	
	.login .login-tab {
		transform: translateY(-.74rem);
	}
	
	.login .login .yd-tab-nav-item:not(:last-child):after {
		display: none !important;
		height: 0px !important;
		top: 0 !important;
	}
	
	.login .yd-tab-nav .yd-tab-active {
		font-size: .31rem !important;
		color: #282828;
	}
	
	.login .yd-tab-nav .yd-tab-active:before {
		display: none;
	}
	
	.login .yd-tab-active>a {
		color: #282828
	}
	
	.login .yd-tab-active>a::after {
		content: "";
		display: block;
		width: 2.94rem;
		height: 2px;
		background: #e34648;
		position: absolute;
		bottom: 0;
		left: .24rem;
	}
	
	.login .yd-tab-nav-item {
		font-size: .31rem !important;
		color: #7d7d7d !important;
	}
	
	.login .yd-tab-nav:after {
		display: none;
	}
	/*账号登录*/
	
	.login .Account .mytab-ul-item {
		border-bottom: 1px solid #F3F3F3;
	}
	
	.login .Account .mycell-item-left {
		width: .44rem;
		height: .47rem;
		margin: .21rem .4rem;
	}
	
	.login .Account .icont {
		background: url(../assets/img/images/login-user_03.png) no-repeat center;
		background-size: 100%;
	}
	
	.login .Account .iconp {
		background: url(../assets/img/images/login-user1_03.png) no-repeat center;
		background-size: 100%;
	}
	
	.login .Account .icony {
		position: relative;
		background: url(../assets/img/images/login-user_06.png) no-repeat center;
		background-size: 100%;
	}
	
	.login .Account .my-cellinput::after {
		content: "";
		display: block;
		width: 1px;
		height: .44rem;
		background: #F3F3F3;
		position: absolute;
		top: .3rem;
		left: 1.2rem;
	}
	
	.login .Account .mytab-ul-item-other {
		text-align: center;
		padding: .61rem 0 .44rem 0;
		box-sizing: border-box;
		font-size: .31rem;
		color: #333333;
	}
	
	.login .Account .mytab-ul-item-other a {
		color: #e34648;
	}
	
	.login .Account .mytab-ul-item-btn {
		text-align: center;
	}
	
	.login .Account .account-submint-btn {
		width: 5.1rem;
		height: .75rem;
		background: #E34648;
		color: #fff;
		border: none;
		font-size: .34rem;
		border-radius: 5px;
	}
	
	.login .Account .yd-cell-item {
		padding-left: 0;
	}
	/*手机号登录*/
	
	#Graphical-code {
		display: block;
		width: 2rem;
		height: .8rem;
	}
	
	.login .mytab-ul {
		padding: 0 .36rem;
		box-sizing: border-box;
	}
	
	.login .mytab-ul-item-y {
		display: flex;
		align-items: center;
		font-size: .31rem;
		/*padding: 0 .24rem ;*/
		box-sizing: border-box;
	}
	
	.login .mytab-ul-item-y .my-input {
		border: none;
		padding-left: .03rem;
		box-sizing: border-box;
		line-height: .91rem;
		width: 3rem;
	}
	
	.login .mytab-ul-item-y>a {
		color: #E34648;
		text-decoration: underline;
	}
	
	.login .Account .icony::after {
		content: "";
		display: block;
		width: 1px;
		height: 80%;
		background: #F3F3F3;
		position: absolute;
		top: 0;
		right: -.36rem;
	}
	
	::-webkit-input-placeholder {
		color: #a4a4a4;
	}
	/*第三方登录*/
	
	.login .tp-login {
		width: 100%;
		padding-top: .97rem;
		box-sizing: border-box;
	}
	
	.login .tp-login-top {
		text-align: center;
		color: #7e7c7c;
		font-size: .31rem;
	}
	
	.login .tp-login-title {
		display: block;
		position: relative;
	}
	
	.login .tp-login-title::after,
	.login .tp-login-title::before {
		content: "";
		display: block;
		width: 1.94rem;
		height: 1px;
		background: #a0a0a0;
		position: absolute;
		top: 50%;
		left: .4rem;
	}
	
	.login .tp-login-title::before {
		right: .4rem;
		left: initial;
	}
	
	.login .tp-login-main {
		display: flex;
		justify-content: space-between;
		padding: .56rem .88rem;
		box-sizing: border-box;
	}
	
	.login .tp-logo {
		width: 1.1rem;
		height: 1.1rem;
	}
	
	.login .tp-logo>img {
		display: block;
		width: 100%;
		height: 100%;
	}
</style>